<template>
  <div class="el-container">
    <div>
      <div class="nav_box">
        <div>
          <h4>设备信息</h4>
        </div>
        <div>
          <ul>
            <!-- <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li> -->
          </ul>
        </div>
      </div>
      <!-- ......................................................................... -->

      <template>
        <!-- <el-table style="border: 0.02rem solid #000">
          <el-table-column
            :prop="item.prop"
            :label="item.tab_title"
            width="229"
            v-for="(item, index) in tabList"
            :key="index"
            style="border: 0.02rem solid #000 !important"
          >
          </el-table-column>
        </el-table> -->

        <el-table
          :key="tableKey"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%"
          :header-cell-style="{ background: '#ccc' }"
        >
          <!-- v-loading="listLoading" -->
          <!-- @sort-change="sortChange" -->
          <!-- <el-table-column type="selection" align="center" /> -->
          <el-table-column label="序号" prop="序号" align="center" width="80">
            <!-- :class-name="getSortClass('序号')" -->

            <template slot-scope="scop">
              <span>{{ scop.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备IP" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.sbIP }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备位置" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.sbweizhi }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备编号" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.sbwbianhao }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警时间" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.bjTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备状态" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.sbzhuangtai }}</span>
            </template>
          </el-table-column>
          <el-table-column label="视频流" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.tvliu }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="操作" align="center" min-width="141px" max-width="230px"
          class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" @click="handleUpdate(row.indexnum)">
              编辑
            </el-button>
            <el-button v-if="row.status != 'deleted'" size="mini" type="danger"
              @click="handleDelete(row.indexnum, $index)">
              删除
            </el-button>
          </template>
        </el-table-column> -->
        </el-table>

        
          <!-- 底部导航 -->
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.pageIndex"
            :limit.sync="listQuery.pageSize"
            @pagination="getList"
          />
      </template>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination"; // 底部导航组件

export default {
  components: {Pagination},
  data() {
    return {
      //   listLoading: true,
      tableKey: 0,
      tabList: [
        {
          prop: "serial ",
          tab_title: "序号",
        },
        {
          prop: "ip",
          tab_title: "设备IP",
        },
        {
          prop: " place",
          tab_title: "设备位置",
        },
        {
          prop: " number",
          tab_title: "设备编号",
        },
        {
          prop: " timer",
          tab_title: "报警时间",
        },
        {
          prop: " state",
          tab_title: "设备状态",
        },
        {
          prop: " tv",
          tab_title: "视频流",
        },
      ],
      total:100,
      listQuery:{
        pageIndex:1,
        pageSize:10
      },
      tableData: [
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
        {
          sbIP: "192.268.25.1",
          sbweizhi: "1#楼",
          sbwbianhao: "12345678",
          bjTime: "2020-05-19 11：23：43",
          sbzhuangtai: "在线",
          tvliu: "",
        },
      ],
    };
  },
  methods:{
    getList(){

    }
  }
};
</script>
<style lang="less">
.el-container > div {
  width: 100%;
}
.nav_box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>